<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
  <title>学术</title>
  <style>
		html, body {width: 100%;min-height: 100%;background: #f0f0f0;}
    .h20 {height: 0.5rem;background: #f0f0f0;}


    #header_top {
        background: #2997e4;
        padding-top: 25px;
    }
    .xsTab .aui-tab-item {
      border: none;
      position: relative;
    }
    .xsTab .aui-tab-item:after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 50%;
      height: 2px;
      background: #fff;
      margin: auto;
    }
    .xsTab .aui-tab-item.aui-active {
      color: #2997e4;
    }
    .xsTab .aui-tab-item.aui-active:after {
      background: #2997e4;
    }
    .cxContent {
      margin-top: 1rem;
    }
    .cxContent > div {
      display: none;
    }
    .cxContent .aui-list-item-media {
      width: 6.5rem;
    }
    .cxContent .aui-list-item .aui-list-item-title {
      color: #333;
      line-height: 1.2rem;
      font-size: 0.8rem;
    }
    .cxContent .aui-list-item .aui-info-item {
      color: #999;
      font-size: 0.7rem;
    }
    #cxContent .aui-media-list .aui-list-item-inner {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: vertical;
      box-orient: vertical;
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-box-align: start;
      -webkit-align-items: flex-start;
      align-items: flex-start;
    }
    .jh_btn {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
    }
    .jh_btn a {
      display: block;
      width: 100%;
      text-align: center;
      padding: 0.5rem 0;
      color: #fff;
      font-size: 0.8rem;
      background: #2997e4;
      font-weight: bold;
    }
    .kjxq {
      padding-bottom: 2rem;
    }
    .itemIco {
      width: 100%;
      height: 4rem;
    }
    #header_top {
      position: fixed;
      width: 100%;
      top:0;
      z-index: 99;
    }
    #xsTab {
      position: fixed;
      width: 100%;
      top:65px;
      z-index: 99;
    }
    body {
      padding-top:89px;
    }
    .xsContent {
      min-height: calc(100vh - 109px - 1rem)
    }
    .kjxqc {
      min-height: calc(100vh - 109px - 3rem)
    }
	</style>
</head>
<body>
<div id="app" v-cloak>

    <header id="header_top" class="aui-bar aui-bar-nav" >

      <a class="aui-pull-left"  onclick="goback()">
          <span class="aui-iconfont aui-icon-left"></span>
      </a>
      <div class="aui-title" id="title">
      创新
    </div>
        <a class="aui-pull-right" onclick="">
        </a>
    </header>
  <div class="aui-tab xsTab" id="xsTab">
    <div class="aui-tab-item aui-active" @click="open_cg">科研成果</div>
    <div class="aui-tab-item" @click="open_xq">科技需求</div>
  </div>
  <div class="cxContent" id="cxContent">
    <div class="xsBox kycg" style="display: block;">
    <section class="aui-refresh-content kycgBox">
      <div class="h20"></div>
      <div class="aui-content xsContent">
        <ul class="aui-list aui-media-list">
          <li class="aui-list-item" v-for="item in newsList1" @click="openPage('cx_need','技术详情',item.id)">
            <div class="aui-media-list-item-inner">
              <div class="aui-list-item-media">
                <div v-if="item.image && item.image != ''" class="itemIco" :style="'background: url('+ item.image +') center/cover no-repeat'"></div>
                <div v-else class="itemIco" style="background: url(../../image/banner1.jpg) center/cover no-repeat"></div>
              </div>
              <div class="aui-list-item-inner">
                <div class="aui-list-item-text">
                  <div class="aui-list-item-title">{{item.title}}</div>
                </div>
                <div class="aui-info aui-margin-t-5" style="padding:0">
                  <div class="aui-info-item">{{item.place}}</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
  </section>
    </div>
    <div class="xsBox kjxq">
    <section class="aui-refresh-content kjxqBox">
      <div class="h20"></div>
      <div class="kjxqc">
      <ul class="aui-list aui-media-list ">
        <li class="aui-list-item" v-for="item in newsList2" tapmode="presshover" @click="openPage('cx_need','需求详情',item.id)">
          <div class="aui-media-list-item-inner">
            <div class="aui-list-item-media">
              <!-- <img :src="item.image" alt="" v-if="item.image && item.image != ''">
              <img src="../../image/banner1.jpg" alt="" v-else> -->
              <div v-if="item.image && item.image != ''" class="itemIco" :style="'background: url('+ item.image +') center/cover no-repeat'"></div>
              <div v-else class="itemIco" style="background: url(../../image/banner1.png) center/cover no-repeat"></div>
            </div>
            <div class="aui-list-item-inner">
              <div class="aui-list-item-text">
                <div class="aui-list-item-title">{{item.title}}</div>
              </div>
              <div class="aui-info aui-margin-t-5" style="padding:0">
                <div class="aui-info-item">{{item.createDate}}</div>
              </div>
            </div>
          </div>
        </li>
      </ul>
      </div>
  </section>
      <div class="jh_btn" @click="openPage('cx_fbxq', '发布需求')">
        <a href="javascript:;">发布需求</a>
      </div>
    </div>
  </div>

</div>

</body>
<script src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">

    function goback () {
      api.closeWin({name:api.pageParam.name});
    }
  apiready = function() {
      var app = new Vue({
        el: '#app',
        data: {
          newsList1: [],
          newsList2: [],
          page: 1,
          totalpage: 1
        },
        created: function() {
          var $_this = this;

          api.ajax({
            url: window.Url.getScientificList + $_this.page,
            timeout: 300,
          }, function(ret, err) {
              if (ret) {
                  // api.alert({ msg: JSON.stringify(ret) });
                  if (ret.data != null) {
                    $_this.totalpage = ret.data.totalpage
                    $_this.newsList1 = ret.data.newsList
                  }
              } else {
                  api.alert({ msg: JSON.stringify(err) });
              }
          })
          api.ajax({
            url: window.Url.getScienceList + '1/' + $_this.page,
            timeout: 300,
          }, function(ret, err) {
              if (ret) {
                  // api.alert({ msg: JSON.stringify(ret) });
                  if (ret.data != null) {
                    $_this.totalpage = ret.data.totalpage
                    $_this.newsList2 = ret.data.newsList
                  }

              } else {
                  api.alert({ msg: JSON.stringify(err) });
              }
          })
          var scroll = new auiScroll({
    							listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
    							distance:40 //判断到达底部的距离，isToBottom为true
    					},function(ret){
    						 if (ret.isToBottom) {
    							 $_this.page ++
    							 if ($_this.page > $_this.totalpage) {
    								 $_this.page = $_this.totalpage
    								 return
    							 }
    							 api.ajax({
                     url: window.Url.getScienceList + '1/' + $_this.page,
    								timeout: 300,
    							}, function(ret, err) {
    									if (ret) {
                        if (ret.data == null) return
    										 //  api.alert({ msg: JSON.stringify(ret) });
    											$_this.newsList2 = $_this.newsList2.concat(ret.data.newsList)

    									} else {
    											api.alert({ msg: JSON.stringify(err) });
    									}
    							})
    						 }

    					})
        },
        methods: {
          openPage:function (type, title, id) {
            api.openWin({
              name: 'index_' + type,
              pageParam: {
                name: 'index_' + type,
                title: title,
                id: id
              },
              url: './index_' + type + '.html',
              delay: 200,
              bounces: false
            });
          },
          open_xq:function() {
            var $_this = this;
            var pullRefresh2 = new auiPullToRefresh({
                container: document.querySelector('.kjxqBox'),
                triggerDistance: 100
            },function(ret){
                if(ret.status=="success"){
                  $_this.page = 1
                  api.ajax({
                    url: window.Url.getScienceList + '1/' + $_this.page,
                    timeout: 300,
                  }, function(ret, err) {
                      if (ret) {
                          // api.alert({ msg: JSON.stringify(ret) });
                          setTimeout(function() {
                            if (ret.data != null) {
                              $_this.totalpage = ret.data.totalpage
                              $_this.newsList2 = ret.data.newsList
                              pullRefresh2.cancelLoading(); //刷新成功后调用此方法隐藏
                            }
                          },500)

                      } else {
                          api.alert({ msg: JSON.stringify(err) });
                      }
                  })
                }

            })
          },
          open_cg:function() {
            var $_this = this;
            var pullRefresh1 = new auiPullToRefresh({
                container: document.querySelector('.kycgBox'),
                triggerDistance: 100
            },function(ret){
                if(ret.status=="success"){
                  $_this.page = 1
                  api.ajax({
                    url: window.Url.getScientificList + $_this.page,
                    timeout: 300,
                  }, function(ret, err) {
                      if (ret) {
                          // api.alert({ msg: JSON.stringify(ret) });
                          setTimeout(function() {
                            if (ret.data != null) {
                              $_this.totalpage = ret.data.totalpage
                              $_this.newsList1 = ret.data.newsList
                              pullRefresh1.cancelLoading(); //刷新成功后调用此方法隐藏
                            }
                          },500)
                      } else {
                          api.alert({ msg: JSON.stringify(err) });
                      }
                  })
                }
            })
          }
        },
        mounted:function() {
          var tab = new auiTab({
            element:document.getElementById("xsTab"),
            index:1,
            repeatClick:false
          },function(ret){
            var xsBox = document.querySelectorAll('.xsBox')
            for (var i = 0; i < xsBox.length; i++) {
              xsBox[i].style.display = 'none'
            }
            document.querySelectorAll('.xsBox')[ret.index - 1].style.display =  'block'
          });

          var $_this = this;
          var pullRefresh1 = new auiPullToRefresh({
              container: document.querySelector('.kycgBox'),
              triggerDistance: 100
          },function(ret){
              if(ret.status=="success"){
                $_this.page = 1
                api.ajax({
                  url: window.Url.getScientificList + $_this.page,
                  timeout: 300,
                }, function(ret, err) {
                    if (ret) {
                        // api.alert({ msg: JSON.stringify(ret) });
                        setTimeout(function() {
                          if (ret.data != null) {
                            $_this.totalpage = ret.data.totalpage
                            $_this.newsList1 = ret.data.newsList
                            pullRefresh1.cancelLoading(); //刷新成功后调用此方法隐藏
                          }
                        },500)
                    } else {
                        api.alert({ msg: JSON.stringify(err) });
                    }
                })
              }
          })
        }
      })
    }
</script>
</html>
